<template>
  <el-form ref="loginForm" :model="loginForm" class="login-form">
    <h3 class="title1">{{ title }}</h3>
    <div style="text-align: center" v-if="!showUserSelect">
      <el-image :src="imgSrc" style="width: 200px;height: 200px"/>
    </div>
    <template v-else>
      <el-form-item label="选择用户" prop="userName">
        <el-radio-group v-model="loginForm.username">
          <el-radio :label="u.userName" v-for="u in selUsers" :key="u.userId">{{ u.nickName }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button class="logins"
          :loading="loading"
          size="medium"
          type="primary"
          style="width:70%;"
          @click="handleLogin"
        >
          <span v-if="!loading">确 认 登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
        <el-button type="warning" style="width: 20%" size="medium" @click="showUserSelect=false">重置</el-button>
      </el-form-item>
    </template>
    <slot/>
  </el-form>
</template>

<script>
import {guid} from "@/utils/ruoyi";
import SySocket from '@/utils/socket'

export default {
  name: "LoginFormWechatScan",
  data() {
    let state = 'login_' + new Date().getTime() + '_' + guid(6);
    return {
      sySocket: null,
      // title: process.env.VUE_APP_TITLE || '[[数研脚手架]]系统',
      title:'欢迎登录',
      state: state,
      imgSrc: process.env.VUE_APP_BASE_API + '/system/user/loginCode/' + state,
      loginForm: {
        username: "",
        password: "",
        loginType: 'wechatScan',
        code: "",
        uuid: ""
      },
      loading: false,
      // 注册开关
      redirect: undefined,
      //验证码倒计时开关
      showUserSelect: false,
      selUsers: []
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  mounted() {
    //开启socket
    this.sySocket = new SySocket(this.state);
    //注册扫码成功事件
    if (window.globalEventHandler) {
      window.globalEventHandler.$on('loginSuccess', evt => {
        if (evt.data.users.length > 0) {
          //展开用户列表选择
          this.loginForm.uuid = evt.data.userInfo.openid;
          this.loginForm.code = evt.data.code;
          this.selUsers = evt.data.users;
          this.showUserSelect = true;
          this.loginForm.username = this.selUsers[0].userName;
          //如果只有一个用户，直接登录
          if (this.selUsers.length == 1) {
            this.handleLogin();
          }
        } else {
          this.$modal.alertError('尚未绑定用户信息');
        }
      })
    }
  },
  destroyed() {
    //解绑事件
    window.globalEventHandler.$off('loginSuccess');
    //只在登录页才关闭，因为在登录页打开的
    this.sySocket.destroy();
  },
  methods: {
    //发送验证码
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          //执行登录
          this.$store.dispatch("Login", this.loginForm).then(() => {
            localStorage.setItem('weekPwd', '0');
            this.$router.push({path: this.redirect || "/"}).catch(() => {
            });
          }).catch(() => {
            this.loading = false;
            this.showUserSelect = false;
          });
        }
      });
    }
  }
};
</script>
